import React from 'react';
import { NavLink, Routes, Route, Navigate } from 'react-router-dom';
import RerChild1 from './RerChild1';
import RerChild2 from './RerChild2';
import RouterCom1 from './RouterCom1';
import RouterCom2 from './RouterCom2';
function RouterExercise() {
  function isActive({ isActive }) {
    return isActive ? 'active1' : 'active2';
  }
  return (
    <>
      <h1>路由练习</h1>
      <NavLink className={isActive} to="/routercom1/张三/男/18">
        一级路由01
      </NavLink>
      ||||
      <NavLink className={isActive} to="/routercom2">
        一级路由02
      </NavLink>
      <hr />
      <h3>一级内容展示</h3>
      <Routes>
        <Route path="/" element={<Navigate to="/routercom1" replace />} />
        <Route path="/routercom1/:username/:sex/:age" element={<RouterCom1 />}>
          <Route path="rerchild1" element={<RerChild1 />} />
        </Route>
        <Route path="/routercom2" element={<RouterCom2 />}>
          <Route path="rerchild2" element={<RerChild2 />} />
        </Route>
      </Routes>
    </>
  );
}

export default RouterExercise;
